<template>
	<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
		<!-- 顶部分割线 -->
		<view style="width: 100%;height: 10rpx;background-color: #F7F8FF;margin-top: 28rpx;"></view>

		<!-- 商品标题和图片 -->
		<view style="width: 702rpx; display: flex;margin-top: 20rpx;">
			<image mode="aspectFill" :src="carobj.image" style="width: 200rpx;height: 200rpx;"></image>
			<view style="width: 480rpx;margin-left: 19rpx;">
				<text
					style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;
				font-size: 30rpx;color: #333333;line-height: 60rpx;"
				>
					{{ carobj.title }}
				</text>
			</view>
		</view>

		<!-- 预约明细 -->
		<!-- 预约明细标题 -->
		<view style="width: 702rpx; margin-top: 45rpx;display: flex;align-items: center;">
			<view style="width: 1px;height: 28rpx;background-color: #4B9EFF;"></view>
			<text style="font-size: 28rpx;color: #333333;margin-left: 10rpx;">预约明细</text>
		</view>
		<view style="margin-top: 22rpx; width: 702rpx;height: 1px;background-color: #F7F8FF;"></view>
		<!-- 预约明细的明细item -->
		<view
			style="width: 702rpx;margin-top: 19rpx; display: flex;justify-content: space-between;"
			v-for="(item, index) in appointmentList"
			:key="index"
		>
			<text style="font-size: 24rpx;color: #666666;">{{ item.title }}</text>
			<text style="font-size: 24rpx;color: #333333;">￥{{ item.price }}</text>
		</view>

		<!-- 分割线 -->
		<view style="margin-top: 30rpx;width: 100%;height: 10rpx;background-color: #F7F8FF;"></view>

		<!-- 订单状态 -->
		<!-- 订单状态标题 -->
		<view style="width: 702rpx; margin-top: 20rpx;display: flex;align-items: center;">
			<view style="width: 1px;height: 28rpx;background-color: #4B9EFF;"></view>
			<text style="font-size: 28rpx;color: #333333;margin-left: 10rpx;">订单状态</text>
		</view>
		<!-- 订单状态的明细item -->
		<view
			style="width: 702rpx;margin-top: 19rpx; display: flex;justify-content: space-between;"
			v-for="(item, index) in orderTypeList"
			:key="index"
		>
			<text style="font-size: 24rpx;color: #666666;">{{ item.title }}：</text>
			<text style="font-size: 24rpx;color: #333333;">{{ item.price }}</text>
		</view>

		<!-- 分割线 -->
		<view style="margin-top: 30rpx;width: 100%;height: 10rpx;background-color: #F7F8FF;"></view>

		<!-- 订单信息 -->
		<!-- 订单信息标题 -->
		<view style="width: 702rpx; margin-top: 20rpx;display: flex;align-items: center;">
			<view style="width: 1px;height: 28rpx;background-color: #4B9EFF;"></view>
			<text style="font-size: 28rpx;color: #333333;margin-left: 10rpx;">订单信息</text>
		</view>
		<!-- 订单信息的明细item -->
		<view
			style="width: 702rpx;margin-top: 19rpx; display: flex;justify-content: space-between;"
			v-for="(item, index) in orderContextList"
			:key="index"
		>
			<text style="font-size: 24rpx;color: #666666;">{{ item.title }}：</text>
			<text style="font-size: 24rpx;color: #333333;">{{ item.price }}</text>
		</view>

		<!-- 分割线 -->
		<view style="margin-top: 30rpx;width: 100%;height: 10rpx;background-color: #F7F8FF;"></view>

		<!-- 订单金额 -->
		<!-- 订单金额标题 -->
		<view style="width: 702rpx; margin-top: 20rpx;display: flex;align-items: center;">
			<view style="width: 1px;height: 28rpx;background-color: #4B9EFF;"></view>
			<text style="font-size: 28rpx;color: #333333;margin-left: 10rpx;">订单金额</text>
		</view>
		<!-- 订单金额的明细item -->
		<view
			style="width: 702rpx;margin-top: 19rpx; display: flex;justify-content: space-between;"
			v-for="(item, index) in orderPriceList"
			:key="index"
			@click.stop="btn = !btn"
		>
			<text style="font-size: 24rpx;color: #666666;">{{ item.title }}：</text>
			<!-- == '' && 0 ? 0 : item.price -->
			<text style="font-size: 24rpx;color: #333333;">￥{{ item.price }}</text>
		</view>

		<!-- 			<view style="display: flex;align-items: center;">
				<picker mode="selector" @change="carTabChange" :value="carTableIndex" :range="carTableList"  :default-selector='[0, 1]' >
					<view style="font-size: 26rpx;color: #666666;">{{ carTableList[carTableIndex]}}</view>
				</picker>
			</view> -->

		<!-- 	<view style="display: flex;align-items: center;">
		<u-dropdown ref="uDropdown">
			<u-dropdown-item title="属性">
				<view class="slot-content">
					<view class="u-text-center u-content-color u-m-t-20 u-m-b-20">其他自定义内容</view>
					<u-button type="primary" @click="closeDropdown">确定</u-button>
				</view>
			</u-dropdown-item>
		</u-dropdown>
			</view> -->
		<!-- 分割线 -->
		<view style="margin-top: 22rpx; width: 702rpx;height: 1px;background-color: #F7F8FF;"></view>
		<view
			style="width: 702rpx;margin-top: 20rpx; display: flex;justify-content: space-between;align-items: center;font-size: 28rpx;color: #333333;"
		>
			<text>合计：</text>
			<text>￥{{ carobj.price }}</text>
		</view>
		<view style="width: 702rpx; display: flex;justify-content: space-between;align-items: center;font-size: 28rpx;color: #333333;">
			<text>实收：</text>
			<text>￥{{ combined }}</text>
		</view>

		<view style="width: 1rpx;height: 100rpx;"></view>

		<!-- 支付按钮 -->
		<view
			v-if="!conversion"
			style="width: 100%;height: 80rpx;line-height: 80rpx;text-align: center;background-color: #4B9EFF; font-size: 28rpx;color: #FFFFFF;
		position: fixed;bottom: 0px;"
			@click.stop="pay"
		>
			创建订单
		</view>
		<!-- .stop避免后期更改功能，预防冒泡 -->
		<view
			v-if="conversion"
			style="display: flex;align-items: center; justify-content: space-around; width: 100%;height: 80rpx;line-height: 80rpx;text-align: center; font-size: 28rpx; color: #FFFFFF;
		position: fixed;bottom: 0px;"
		>
			<text style="flex: 1; background-color:#72B3FF; " @click.stop="GO1">取消订单</text>
			<text style="flex: 1; background-color: #4B9EFF;" @click.stop="paybuy">去支付</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			user_couponesid: '', //存优惠劵id
			amountt: '', //存优惠劵金额
			combined: '', //合计
			carTableIndex: 0,
			// carTableList:[],
			conversion: false, //创建订单成功赋值转换
			carobj: {},
			btn: false,
			obj: [],
			carid: '', //选好的车id,
			id: '', //颜色id
			caridbox: {}, //商品大类 获取抬头,
			caridyouhuijuan: '',
			appointmentList: [
				{
					title: '空调清洗',
					price: '123.00',
				},
				// {
				// 	title: '',
				// 	price: ''
				// }
			],
			carTableList: [[1, 2, 3], [4, 5, 6]],
			orderTypeList: [
				{
					title: '预约时间',
					price: '2021-01-15 14:38:25',
				},
				{
					title: '核销时间',
					price: '',
				},
				{
					title: '取消时间',
					price: '', //数据未加
				},
			],
			orderContextList: [
				{
					title: '预约人',
					price: '不知道你是谁',
				},
				{
					title: '联系电话',
					price: '13684056326',
				},
				{
					title: '到店时间',
					price: '', //数据未加
				},
				{
					title: '预约类型',
					price: '服务/洗车', //数据未加
				},
				{
					title: '备注',
					price: '', //数据未加
				},
			],
			orderPriceList: [
				{
					title: '订单金额',
					price: '222.00',
				},
				// {
				// 	title: '预约折扣',
				// 	price: '-30.00'
				// },
				{
					title: '优惠券抵扣',
					price: '0.00',
				},
			],
		};
	},
	onLoad() {
		this.user_couponesid = this.$Route.query.user_coupons_id; //优惠劵id
		this.amountt = this.$Route.query.amountt; //优惠劵金额

		this.carobj = this.$Route.query.carobj;

		let caridbox = this.carobj;
		console.log('caridbox: ', caridbox);
		this.obj = this.$Route.query.obj;

		console.log('this.obj: 时间带过来的信息', this.obj);
		this.carid = this.$Route.query.carid;
		this.id = this.$Route.query.id;

		this.orderContextList[0].price = this.obj.name;
		// this.orderTypeList[0].price = uni.getStorageSync('obj',name);
		this.orderContextList[1].price = this.obj.phone;
		// this.orderTypeList[0].price = uni.getStorageSync('obj',phone);
		// this.reservation();//获取预约信息，是做什么的

		// 处理抬头
		this.appointmentList[0].title = caridbox.title; //空调
		this.appointmentList[0].price = caridbox.price; //空调  增加服务
		// console.log("caridbox.price: ",caridbox.price);
		// console.log("this.caridbox: ",caridbox.title);
		//this.appointmentList[1].title = caridbox.title; //抛光增加服务
		//this.appointmentList[1].price = caridbox.original_price;//抛光
		// console.log("this.caridbox: ",caridbox.subtitle);

		this.orderContextList[3].price = caridbox.title; //空调

		this.orderPriceList[0].price = caridbox.price;
		//this.orderPriceList[1].price = caridbox.original_price; //这个预约折扣有问题  已注释
		this.combined = caridbox.price - this.amountt;
		this.orderPriceList[1].price = this.amountt;
	},
	onHide() {
		uni.removeStorageSync('idd');
		uni.removeStorageSync('order_sn');
	},
	methods: {
		closeDropdown() {
			this.$refs.uDropdown.close();
		},
		// 获取订单
		async getCarData() {
			let res;
			try {
				res = await this.$request.get('addons/shopro/goods/detail', {
					data: {
						id: this.id,
					},
				});
			} catch (e) {
				//TODO handle the exception
				console.log('e===', e);
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}
			this.databox = res.data.data;
			console.log('this.databox: ', this.databox);
			this.data.banner = res.data.data.images;
		},

		// 构建订单
		async pay() {
			// uni.showLoading({
			// 	title:"loading..."
			// })
			let res;
			try {
				res = await this.$request.post('addons/shopro/order/createOrder', {
					data: {
						goods_list: [
							{
								goods_id: this.carid, //产品id
								goods_num: 1,
								sku_price_id: this.id, //规格id
								goods_price: this.caridbox.price,
							},
						],
						client_name: this.obj.client_name,
						client_phone: this.obj.client_phone,
						company: this.obj.company,
						attime: this.obj.attime,
						remarks: this.obj.remarks,
						order_imge: this.obj.order_imge,
						coupons_id: this.user_couponesid, //优惠卷
						// address_id:"1",
						yuyueshijian: this.obj.date,
						phone: this.obj.phone,
						remark: this.obj.remarks,
						address: '',
						consignee: this.obj.name,
						// remark:"用户备注",
						order_type: this.cardid,
						from: 'cart',
						
					},
				});
			} catch (e) {
				//TODO handle the exception
				console.log('e===', e);
				uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}
			uni.showToast({
				title: res.data.msg,
				icon: 'none',
			});
			if (res.data.code === 1) {
				this.conversion = true; //构建成功转换显示值
				// this.GO1(res.data.data.id);
				uni.setStorageSync('idd', res.data.data.id);
				uni.setStorageSync('order_sn', res.data.data.order_sn);
				// this.$forceUpdate();
			}
			console.log('res: ', res);
			// this.paybuy(res.data.data.order_sn);
		},

		// 取消订单
		async GO1() {
			let res;
			try {
				res = await this.$request.post('addons/shopro/order/cancel', {
					data: {
						id: uni.getStorageSync('idd'), //订单id
					},
				});
			} catch (e) {
				console.log('e :>> ', e);
				return uni.showToast({
					title: '网络链接失败',
					icon: 'icon',
				});
			}
			uni.showToast({
				title: res.data.msg,
				icon: 'none',
			});
			if (res.data.code === 1) {
				setTimeout(() => {
					this.$Router.pushTab({
						name: 'home',
					});
				}, 1000);
			}
			return;
		},
		async paybuy() {
			// uni.showLoading({
			// 	title:"loading..."
			// })
			let res;
			try {
				res = await this.$request.post('addons/shopro/pay/prepay', {
					data: {
						// type:'recharge',
						order_sn: uni.getStorageSync('order_sn'),
						payment: 'wechat',
					},
					header: {
						platform: 'wxMiniProgram',
					},
				});
			} catch (e) {
				//TODO handle the exception
				console.log('e===', e);
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}
			console.log('res: ', res);
			uni.requestPayment({
				provider: 'wxpay', //支付商家
				timeStamp: res.data.data.pay_data.timeStamp, //支付时间戳。当前时间
				nonceStr: res.data.data.pay_data.nonceStr, //支付密钥
				package: res.data.data.pay_data.package, //支付id
				signType: res.data.data.pay_data.signType, //加密方式默认MD5
				paySign: res.data.data.pay_data.paySign, //支付签名
				success: res => {
					console.log('success:' + JSON.stringify(res));
					uni.$showMsg('支付成功');
					uni.navigateTo({
						url: '/pages/my',
					});
				},
				fail: err => {
					uni.$showMsg('支付失败');
					console.log('err: ', err);
					console.log('fail:' + JSON.stringify(err));
				},
			});
		},
	},
};
</script>

<style></style>
